<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "行动要点-人员掩蔽行动" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "人员掩蔽行动")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "行动时机：当接到预先警报信号时。<br/>主要对象：战时执行防空袭任务的党政机关干部、按计划留城人员和人防专业队伍等“三坚持”人员。<br/>行动方法：按统一指挥，条块结合，以块为主的方式组织实施。具体组织行动时，由县（区）统一指挥协调，以街道、社区为主体按行政区划现地组织掩蔽行动，在街道、社区现地组织过程中，人防工程的分配使用，在优先保证各级指挥、通信和防空专业队伍掩（隐）蔽使用的前提下，原则上各单位自建的人防工程自行使用，公用人防工程由市、区、街道按照统筹兼顾、突出重点的原则，统一分配使用；除人防工程掩蔽外人员要利用市区内各处公园、广场、绿地、体育场、校园操场及其它空旷场地等有利地形进行就近隐蔽。<br/>人员掩蔽最大规模数量为XX万人。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "行动要点-人员掩蔽行动",
      data: [
        {
          k: "人员掩蔽行动",
          v: valueHtml.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
const tableData = ref([
  {
    c1: 1,
    c2: city,
    cc: "长沙",
    c3: "x",
  },
  {
    c1: 2,
    c2: city,
    cc: "武汉",
    c3: "x",
  },
  {
    c1: 3,
    c2: city,
    cc: "武汉",
    c3: "x",
  },
]);
</script>
<template>
  <div class="">
    <FirstTitle name="人员掩蔽行动" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>